<template>
  <div>
    <Row :gutter="24">
      <Col span="7">
      <div>
        <Input v-width="250" type="text" v-model="keyWord" placeholder="请输入标题关键词" @on-enter="enterSearch" clearable
          @on-clear="enterSearch"></Input>
      </div>
      </Col>
      <Col span="12">
      <Button type="primary" @click="addData">新增</Button>
      </Col>
    </Row>
    <div style="margin-top:20px">
      <Table :columns="columns" :data="allData">
        <template slot-scope="{ row, index }" slot="action">
          <a style="margin-right: 5px" @click="editData(row)">编辑</a>
          <Divider type="vertical" />
          <a @click="deleteData(row)">删除</a>
        </template>
        <template slot-scope="{ row, index }" slot="can">
          <div style="display: flex;">
            <div v-for="(item,index) in row.suitable_list" :key="index">
              <Tag color="default">{{item}}</Tag>
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="noCan">
          <div style="display: flex;">
            <div v-for="(item,index) in row.taboo_list" :key="index">
              <Tag color="default">{{item}}</Tag>
            </div>
          </div>
        </template>
      </Table>
    </div>
    <div class="ivu-mt ivu-text-center">
      <Page show-total show-elevator show-sizer :total="total" :current.sync="pageParams.page"
        :page-size="pageParams.pageSize" :page-size-opts="pageOpts" @on-change="changePageSize"
        @on-page-size-change="formChangePage" />
    </div>
    <Modal v-model="modal" :title="modalStatus" :mask-closable="false" @on-cancel="cancel">
      <Form ref="formBox" :model="formBox" :rules="rules" :label-width="80">
        <FormItem prop="title" label="标题：">
          <Input v-model="formBox.title" placeholder="请输入标题" style="width:400px" />
        </FormItem>
        <FormItem prop="can" label="宜：">
          <Input v-model="formBox.can" placeholder="请输入内容,多个用，隔开" style="width:400px" />
        </FormItem>
        <FormItem prop="noCan" label="忌：">
          <Input v-model="formBox.noCan" placeholder="请输入内容,多个用，隔开" style="width:400px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="submitParams" :loading="subLoading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { calendarFortuneList, DeleteCalendarFortune, SetCalendarFortune } from "@api/TApi"
  import dateView from "./dateView.vue"
  export default {
    components: { dateView },
    computed: {
      showOne() {
        return this.formBox.modResult === "循环"
      }
    },
    data() {
      const validateTitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入'));
        } else {
          if (/^[\u4e00-\u9fa5]+$/i.test(value.replace('，', ","))) {
            if (value.length > 4) {
              callback(new Error('字数超过4字'));
            } else {
              callback();
            }
          } else {
            callback(new Error('请输入全中文'));
          }
        }
      };
      const validateCan = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入'));
        } else {
          if (/^[\u4e00-\u9fa5,]+$/i.test(value.replace('，', ","))) {
            if (value.length > 50) {
              callback(new Error('字数超过50字'));
            } else {
              callback();
            }
          } else {
            callback(new Error('请输入全中文'));
          }
        }
      };
      const validateNoCan = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入'));
        } else {
          if (/^[\u4e00-\u9fa5,]+$/i.test(value.replace('，', ","))) {
            if (value.length > 50) {
              callback(new Error('字数超过50字'));
            } else {
              callback();
            }
          } else {
            callback(new Error('请输入全中文'));
          }
        }
      };
      return {
        rules: {
          title: [
            { validator: validateTitle, trigger: 'blur' }
          ],
          can: [
            { validator: validateCan, trigger: 'blur' }
          ],
          noCan: [
            { validator: validateNoCan, trigger: 'blur' }
          ],
        },
        keyWord: "",
        modalStatus: "",
        pageParams: {
          page: 1,
          pageSize: 10,
        },
        formBox: {
          title: "",
          can: "",
          noCan: "",
        },
        modal: false,
        subLoading: false,
        pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
        total: 0,
        allData: [],
        columns: [
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '宜',
            slot: 'can'
          },
          {
            title: '忌',
            slot: 'noCan'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        isEditId: "",
        isEditDate: "",
      }
    },
    created() {
      this._calendarFortuneList()
    },
    methods: {
      deleteData(row) {
        this.$Modal.confirm({
          title: '删除提示',
          content: '<p>是否确认删除，删除后无法恢复</p>',
          onOk: () => {
            DeleteCalendarFortune({ id: row.id }).then(res => {
              this.$Message.success('删除成功');
              this._calendarFortuneList()
            })
          },
        });
      },
      editData(data) {
        this.modalStatus = "编辑"
        this.isEditId = data.id
        this.formBox.title = data.title
        this.formBox.can = data.suitable
        this.formBox.noCan = data.taboo
        this.modal = true
      },
      submitParams() {
        this.$refs.formBox.validate((valid) => {
          if (valid) {
            let params = {
              title: this.formBox.title,
              suitable: this.formBox.can,
              taboo: this.formBox.noCan,
            }
            this.subLoading = true
            if (this.modalStatus === "编辑") {
              params.id = this.isEditId
            }
            let messageInfo = this.modalStatus === "编辑" ? '编辑成功' : "新增成功"
            SetCalendarFortune(params).then(res => {
              this.$Message.success(messageInfo);
              this.cancel()
              this._calendarFortuneList()
            }).finally(() => {
              this.subLoading = false
            })
          }
        })
      },
      cancel() {
        this.modal = false
        this.$refs.formBox.resetFields()
      },
      enterSearch() {
        this.pageParams.page = 1;
        this._calendarFortuneList();
      },
      changePageSize(e) {
        this.pageParams.page = e;
        this._calendarFortuneList();
      },
      /* @函数功能: 每页数量 */
      formChangePage(e) {
        this.pageParams.pageSize = e;
        this._calendarFortuneList();
      },
      addData() {
        this.modalStatus = "新增"
        this.modal = true
      },
      _calendarFortuneList() {
        let params = {
          keyword: this.keyWord,
          page: this.pageParams.page,
          pageSize: this.pageParams.pageSize,
        }
        calendarFortuneList(params).then(res => {
          this.total = res.total
          this.allData = res.list
        })
      }
    }
  }
</script>